<template>
  <div>
    <myheader></myheader>

    <section class="cart text-center">
      <div class="container">
        <div class="row">
          <div class="col-sm-6 mb-3 mb-m-1 text-md-left">
            <a href="catalog.html"
              ><i class="fas fa-arrow-left mr-2"></i> Continue Shopping</a
            >
          </div>
          <div class="col-sm-6 text-md-right">
            <a href="catalog.html" class="btn btn-primary btn-lg pl-5 pr-5"
              >Checkout</a
            >
          </div>
        </div>
        <div class="row">
          <div class="col-12 text-center">
            <h2 class="mt-5 mb-2">购物车</h2>
            <p class="mb-5">
              <span class="primary-color">{{ totalcount }}</span
              >件商品
            </p>
            <table id="cart" class="table table-condensed">
              <thead>
                <tr>
                  <th style="width:60%">商品</th>
                  <th style="width:12%">单价</th>
                  <th style="width:10%">数量</th>
                  <th style="width:16%"></th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in cartlist" :key="index">
                  <td data-th="Product">
                    <div class="row">
                      <div class="col-md-3 text-left">
                        <img
                          :src="
                            'http://localhost:8000/static/upload/' + item.img
                          "
                          alt=""
                          class="img-fluid"
                        />
                      </div>
                      <div class="col-md-9 text-left mt-sm-2">
                        <h4>{{ item.name }}</h4>
                        <p>York &amp; Smith</p>
                      </div>
                    </div>
                  </td>
                  <td data-th="Price">${{ item.price }}</td>
                  <td data-th="Quantity">
                    <input
                      type="number"
                      class="form-control text-center"
                      v-model="item.num"
                    />
                  </td>
                  <td class="actions" data-th="">
                    <div class="text-right">
                      <button
                        @click="changenum(index, '-')"
                        class="btn btn-white btn-md mb-2"
                      >
                        <i class="fas fa-sync">-</i>
                      </button>
                      <button
                        @click="changenum(index, '+')"
                        class="btn btn-white btn-md mb-2"
                      >
                        <i class="fas fa-trash">+</i>
                      </button>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
            <div class="float-right text-right">
              <h4>共计：</h4>
              <h1>${{ totalprice }}</h1>
              <p>(Excluding Delivery)</p>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-6 mb-3 mb-m-1 text-md-left">
            <a href="catalog.html"
              ><i class="fas fa-arrow-left mr-2"></i> Continue Shopping</a
            >
          </div>
          <div class="col-sm-6 text-md-right">
            <a href="catalog.html" class="btn btn-primary btn-lg pl-5 pr-5"
              >Checkout</a
            >
          </div>
        </div>
      </div>
    </section>

    <myfooter></myfooter>
  </div>
</template>


 
<script>
import myheader from "./myheader";
import myfooter from "./myfooter";
import { config } from "../config";

export default {
  data() {
    return {
      msg: "这是一个变量",
      cartlist: [],
      totalcount: "",
      totalprice: ""
    };
  },
  mounted: function() {
    //   初始化购物车
    if (config.cartlist) {
      // 赋值
      this.cartlist = config.cartlist;
      this.totalcount = config.cartlist.length;
      this.get_price();
    } else {
      this.cartlist = [];
      this.totalcount = 0;
      this.totalprice = 0;
    }
  },
  methods: {
    //   计算商品总价
    get_price: function() {
      var total = 0;
      for (let i of this.cartlist) {
        total += i.num * i.price;
      }
      this.totalprice = total;
    },
    // 商品数量增减
    changenum: function(index, type) {
      // 判断操作类型
      if (type == "-") {
        //   判断数量是否大于0
        if (this.cartlist[index].num > 1) {
          // 数量减1
          this.cartlist[index].num--;
        } else {
          this.delete_one();
        }
      } else {
        //   数量加1
        this.cartlist[index].num++;
      }
      //   状态续存
      localStorage.setItem("cart", JSON.stringify(this.cartlist));
    },
    // 删除整行逻辑
    delete_one: function(index) {
      this.cartlist.splice(index, 1);
    }
  },
  components: {
    myheader: myheader,
    myfooter: myfooter
  }
};
</script>
 
<style>
</style>